// const { data } = require("jquery");

// ---------------------------上来就要渲染数据到页面
function renderCategory (){
  $.ajax({
    url:'/my/category/list',
    success:function(res){
  if(res.status === 0){
    let str = ''
  res.data.forEach(element => {
    str += `
     <tr>
    <td>${element.name}</td>
    <td>${element.alias}</td>
    <td>
      <button data-id='${element.id}' data-name='${element.name}' data-alias='${element.alias}' type="button" class="layui-btn layui-btn-xs reset">
        编辑
      </button>
      <button
        type="button"
        data-id='${element.id}'
        class="layui-btn layui-btn-danger layui-btn-xs delete"
      >
        删除
      </button>
    </td>
  </tr>
    `
  });
  $('tbody').html(str)
  }
    }
  })
}
renderCategory()

// ------------------添加点击事件
let addIndex;
$('button:contains("添加类别")').on('click',function(){
  // 点击的显示弹出层，弹出层内容在html页面中的script标签中写
   addIndex = layer.open({
    type: 1,
    title:'添加类别',
    area: ['500px', '250px'],
    content:$('#tanceng').html()
  });
})

// ---------------------提交数据(form是动态创建的需要事件委托)
$('body').on('submit','#add-form',function(e){
e.preventDefault()
let data = $(this).serialize()
$.ajax({
  type:'POST',
  url:'/my/category/add',
  data:data,
  success:function(res){
if(res.status === 0){
  layer.msg(res.message)
  renderCategory()
  layer.close(addIndex);
}
  }
})
})

// ------------------------编辑按钮功能
// 点击编辑按钮，弹出层获取对应input的值，点击确认修改提交给服务器，页面同时修改
let editIndex
$('tbody').on('click','.reset',function(){
   // 获取编辑按钮的自定义属性存的数据
   let shuju = $(this).data()
  editIndex = layer.open({
    type: 1,
    title:'编辑分类',
    area: ['500px', '250px'],
    content:$('#tpl-edit').html()
  });
 
// 数据回填
$('#edit-form input[name=name]').val(shuju.name)
$('#edit-form input[name=alias]').val(shuju.alias)
$('#edit-form input[name=id]').val(shuju.id)
})

// 提交数据
$('body').on('submit','#edit-form',function(e){
e.preventDefault()
let data = $(this).serialize()
$.ajax({
  type:'POST',
  url:'/my/category/update',
  data:data,
  success:function(res){
    if(res.status === 0 ){
      layer.msg(res.message)
      renderCategory()
      layer.close(editIndex)
    }
  }
})
})

// --------------------------删除功能
$('tbody').on('click','.delete',function(){
  let id = $(this).data('id')
  // console.log(id)
  layer.confirm('确定要删除分类吗', function(index){
   $.ajax({
     url:'/my/category/delete',
     data:{id:id},
     success:function(res){
       if(res.status === 0){
         layer.msg(res.message)
         renderCategory()
       }
     }
   })
    layer.close(index);
  });
})
